<template>
	<view class="multiline">
		<view class="info">
			<view :class="{hide:!iSinfo}" :style="!iSinfo?computedStyle:''">
				<view :style="{ color: textColor,fontWeight:fontWeight,fontSize:fontSize + 'rpx'}">
					{{content}}
				</view>
			</view>
			<view style="display: flex;align-items: center;justify-content: flex-end;">
				<text @tap="showinfo" v-if="!iSinfo"
				:style="{ color: showinfotextColor,fontWeight:showinfoFontWeight,fontSize:showinfoSize + 'rpx'}">展开</text>
				<img v-if="!iSinfo" src="@/static/imgs/down.png" style="width:24rpx;height:24rpx;margin-left: 5rpx;" alt="" srcset="" />
			</view>
			
			<view class="" v-if="iSinfo">
				<image v-for="(item,index) in imgs" style="width: 200rpx;height:200rpx;" :src="baseUrl + item" mode=""
					@click="previewImage(index)"></image>
			</view>
		</view>
		<view style="display: flex;align-items: center;justify-content: flex-end;">
			
			<text @tap="showinfo" v-if="iSinfo"
				:style="{ color: '#0197FFFF',fontWeight:showinfoFontWeight,fontSize:showinfoSize + 'rpx'}">
				收起
			</text>
			<img v-if="iSinfo" src="@/static/imgs/up.png" style="width:24rpx;height:24rpx;margin-left: 5rpx;" alt="" srcset="" />
		</view>
		
		
	</view>
</template>

<script>
	export default {
		props: {
			// 文本信息
			content: {
				type: String,
				default: ""
			},
			// 默认显示几行文本
			linesCount: {
				type: [Number, String],
				default: 2
			},
			// 文字颜色
			textColor: {
				type: String,
				default: "#333333"
			},
			// 文字粗体大小
			fontWeight: {
				type: [Number, String],
				default: 400
			},
			// 文字大小
			fontSize: {
				type: [Number, String],
				default: 24
			},
			// 展开收起文字大小
			showinfoSize: {
				type: [Number, String],
				default: 24
			},
			// 展开收起文字颜色
			showinfotextColor: {
				type: String,
				default: "#333333"
			},
			// 展开收起文字粗体大小
			showinfoFontWeight: {
				type: [Number, String],
				default: 400
			},
			imgs: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				iSinfo: false,
			};
		},
		mounted() {},
		computed: {
			computedStyle() {
				const style = `-webkit-line-clamp: ${this.linesCount};`;
				return style;
			}
		},
		methods: {
			previewImage(index) {
				let imgs = [];
				this.imgs.forEach((item) => {
					imgs.push(this.baseUrl + item)
				})
				uni.previewImage({
					current: index, // 当前显示图片索引
					urls: imgs // 需要预览的图片http链接列表
				});
			},
			showinfo() {
				this.iSinfo = !this.iSinfo
			}
		},
	};
</script>

<style lang="scss" scoped>
	.multiline {
		display: flex;
		// width: 100%;
		flex-direction: column;
		background-color: #fff;
		position: relative;

		.info {
			display: flex;
			flex-direction: column;

			view {
				text-align: justify;
				word-break: break-word; //换行模式
				background-color: #fff;
			}

			// text {
			// 	width: 70px;
			// 	display: flex;
			// 	justify-content: flex-end;
			// 	align-items: center;
			// 	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
			// 	color: #0078FF;
			// 	position: absolute;
			// 	bottom: 0rpx;
			// 	right: 0rpx;
			// }
		}

	}

	.hidebtn {
		display: flex;
		flex: 1;
		justify-content: flex-end;
	}

	.hide {
		word-break: break-word; //换行模式
		overflow: hidden;
		text-overflow: ellipsis; //修剪文字
		display: -webkit-box;
		// -webkit-line-clamp: 2; //此处为上限行数
		-webkit-box-orient: vertical;
	}
</style>
